<template>
 <div class="rating_page">
   <head-top head-title="订单列表" :go-back=true></head-top>
   <div class="warrper">
     <div class="scroll-container">
       <scroll :data="orderList" v-if="orderList" class="scroll-sub"  @scrollToEnd="loaderMore"  :pullup="pullup">
         <ul class="order_list_ul">
           <li class="order_list_li" v-for="item in orderList" :key="item.id">
             <img v-lazy="imgBaseUrl + item.restaurant_image_url" class="restaurant_image">
             <section class="order_item_right">
               <section @click="showDetail(item)">
                 <header class="order_item_right_header">
                   <section class="order_header">
                     <h4 >
                       <span class="ellipsis">{{item.restaurant_name}} </span>
                       <svg fill="#333" class="arrow_right">
                         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                       </svg>
                     </h4>
                     <p class="order_time">{{item.formatted_created_at}}</p>
                   </section>
                   <p class="order_status">
                     {{item.status_bar.title}}
                   </p>
                 </header>
                 <section class="order_basket">
                   <p class="order_name ellipsis">{{item.basket.group[0][0].name}}{{item.basket.group[0].length > 1 ? ' 等' + item.basket.group[0].length + '件商品' : ''}}</p>
                   <p class="order_amount">¥{{item.total_amount.toFixed(2)}}</p>
                 </section>
               </section>
               <div class="order_again">
                <!-- <compute-time v-if="item.status_bar.title == '等待支付'" :time="item.time_pass"></compute-time>-->
                  <compute-time v-if="item.status_bar.title !== '等待支付'" :time="item.time_pass"></compute-time>
                  <router-link :to="{path: '/shop', query: {geohash, id: item.restaurant_id}}"v-if="true" tag="span" class="buy_again" >再来一单</router-link>
               </div>
             </section>
           </li>
         </ul>
       </scroll>
     </div>
     <foot-guide></foot-guide>
     <div class="loading-container" v-show="!orderList.length || showLoading">
       <loading></loading>
     </div>
   </div>
   <transition name="router-slid" mode="out-in">
     <router-view></router-view>
   </transition>
 </div>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import footGuide from 'src/components/footer/footGuide'
import {mapGetters, mapMutations} from 'vuex'
import loading from 'components/common/loading/loading'
import computeTime from 'components/common/computeTime/computeTime'
import scroll from 'components/common/scroll/scroll'
import {getImgPath} from 'src/components/common/mixin'
import {getOrderList} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'
  export default {
  data(){
     return{
       orderList: [], //订单列表
       offset: 0,
       preventRepeat: false,  //防止重复获取
       showLoading: false, //显示加载动画
       imgBaseUrl
     }
   },
   created(){
    this.pullup = true;
     this.initData();
   },
   mounted(){
   },
   computed: {
     ...mapGetters([
       'userInfo', 'geohash'
     ])
   },
   methods: {
     ...mapMutations([
       'SAVE_ORDER'
     ]),
     async initData(){
       if(this.userInfo && this.userInfo.user_id){
        let res = await getOrderList(this.userInfo.user_id,this.offset);
        this.orderList = res;
       }
     },
     async loaderMore(){
       if (this.preventRepeat) {
         return
       }
       this.showLoading = true;
       this.offset += 3;
       //获取信息
       let res = await getOrderList(this.userInfo.user_id, this.offset);
       this.orderList =this.orderList.concat(res);
       this.hideLoading();
       if (res.length < 3) {
         return
       }
       this.preventRepeat = false;
     },
     showDetail(item){
       this.SAVE_ORDER(item);
       this.preventRepeat = false;
       this.$router.push('/order/orderDetail');
     },
     //生产环境与发布环境隐藏loading方式不同
     hideLoading(){
       this.showLoading = false;
     }
   },
   components:{
     computeTime,
     scroll,
     loading,
    headTop,
     footGuide
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../style/mixin';
.order_page{
  background-color: #f1f1f1;
  p, span, h4{
    font-family: Helvetica Neue,Tahoma,Arial;
  }
}
/*定义scroll父级的高度，最高父级一定要有初始值，否则父级默认会被子元素撑开*/
.warrper{
  display: flex;
  flex-direction: column;
  left: 0;
  padding-bottom: 2rem;
  height: 100%;
  overflow: hidden;
}
.scroll-container{
  display: flex;
  flex: 1;
  height: 100%;
}
.order_list_ul{
  .order_list_li{
    background-color: #fff;
    display: flex;
    margin-bottom: 0.5rem;
    padding: .6rem .6rem 0;
    .restaurant_image{
      @include wh(2rem, 2rem);
      margin-right: 0.4rem;
    }
    .order_item_right{
      flex: 5;
      .order_item_right_header{
        border-bottom: 0.025rem solid #f5f5f5;
        padding-bottom: .3rem;
        @include fj;
        .order_header{
          h4{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            @include sc(.75rem, #333);
            line-height: 1rem;
            width: 9rem;

            .arrow_right{
              @include wh(.4rem, .4rem);
              fill: #ccc;
              margin-right: .2rem;
            }
          }
          .order_time{
            @include sc(.55rem, #999);
            line-height: .8rem;
          }
        }
        .order_status{
          @include sc(.6rem, #333);
        }
      }
      .order_basket{
        @include fj;
        line-height: 2rem;
        border-bottom: 0.025rem solid #f5f5f5;
        .order_name{
          @include sc(.6rem, #666);
          width: 10rem;
        }
        .order_amount{
          @include sc(.6rem, #f60);
          font-weight: bold;
        }
      }
      .order_again{
        text-align: right;
        line-height: 1.6rem;
        .buy_again{
          @include sc(.55rem, #3190e8);
          border: 0.025rem solid #3190e8;
          padding: .1rem .2rem;
          border-radius: .15rem;
        }
      }
    }
  }
}
/*.loading-enter-active, .loading-leave-active {
  transition: opacity .7s
}
.loading-enter, .loading-leave-active {
  opacity: 0
}
.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}*/
</style>
